<!-- 系统Setup板块 --- Recharge与逾期Setup页面 -->
<template>
  <div>
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="Recharge Package Setup">
        <div>
          <r-table
            :tableHandles="tableHandles"
            :isIndex="false"
            :isPagination="true"
            :tableData="tableData"
            :tableCols="tableCols"
            :tablePage="tablePage"
            :isHandle="true"
            @refresh="getData()"
          >
          </r-table>

          <r-form
            :formRules="formRules"
            :formHandle="formHandle"
            :formData="formData"
            :formCols="formCols"
            ref="elForm3"
            labelWidth="200px"
            dialogWidth="700px"
            :isHandle="true"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="Overdue Setup">
        <r-table
          :tableHandles="tableHandles3"
          :isSelection="false"
          :isIndex="false"
          :isPagination="true"
          :tableData="tableData3"
          :tableCols="tableCols3"
          :isHandle="true"
        >
        </r-table>

        <r-form
          :formRules="searchRules3"
          :formHandle="searchHandle3"
          :formData="searchData3"
          :formCols="searchForm3"
          ref="elForm"
          labelWidth="200px"
          dialogWidth="700px"
          :isHandle="true"
        />

        <slot slot="slot1">
          <div style="margin-left: -150px">
            (UserNot after order ReturnedBattery will start to charge the
            overdue fee until the UserReturn or the overdue fee reaches the
            DepositMoney.)
          </div>
        </slot>
      </el-tab-pane>
    </el-tabs>
    <!-- RechargePackage----Add、Edit -->
    <div>
      <el-dialog
        width="35%"
        :title="dialogFormVisibletitle"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          ref="dialogFormVisibleform"
          :rules="dialogFormVisiblerules"
          :model="dialogFormVisibleform"
          label-width="auto"
        >
          <el-form-item label="Package Name" prop="mealName">
            <el-input
              v-model="dialogFormVisibleform.mealName"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
          <el-form-item label="Recharge Amount" prop="inMoney">
            <el-input
              type="number"
              v-model="dialogFormVisibleform.inMoney"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
          <el-form-item label="Gift Amount" prop="outMoney">
            <el-input
              type="number"
              v-model="dialogFormVisibleform.outMoney"
              placeholder="Please Enter"
            ></el-input>
          </el-form-item>
          <el-form-item label="Whether The Gift Function Is Enabled">
            <el-switch
              v-model="dialogFormVisibleform.outStatus"
              :active-value="1"
              :inactive-value="2"
              active-color="#13ce66"
              inactive-color="#cccccc"
              @change="changeSwitch(dialogFormVisibleform.outStatus)"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button
            type="primary"
            @click="affirmAgentFn('dialogFormVisibleform')"
            >Confirm</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "platform_information",
  data() {
    return {
      dialogFormVisibletitle: "",
      dialogFormVisible: false,

      dialogFormVisibleform: {
        id: "",
        mealName: "", //TypeName
        inMoney: "", //Recharge Amount
        outMoney: "", //Gift Amount(Balance)
        outStatus: 2 //增送功能是否开启 ：1：开启 2：关闭
        // isoutStatus: false //增送功能是否开启 ：1：开启 2：关闭
      },
      dialogFormVisiblerules: {
        inMoney: [
          { required: true, message: "Recharge Amount Cannot Empty" }
          // { type: 'number', message: 'Recharge Amount必须为数字值' }
        ],
        outMoney: [
          { required: true, message: "Gift Amount Cannot Empty" }
          // { type: 'number', message: 'Gift Amount必须为数字值' }
        ],
        mealName: [
          { required: true, message: "Please Enter", trigger: "change" }
        ],
        id: [{ required: true, message: "Please Enter", trigger: "change" }]
      },
      particularsData: [], //RechargeEdit
      activeName: "RechargePackageSetup",
      isShowTinymce: false,
      isOpen: false,
      tableHandles: [
        {
          label: "Add",
          type: "success",
          size: "mini",
          plain: true,
          handle: e => {
            // this.elFormVisible()
            this.dialogFormVisibletitle = "Add";

            this.dialogFormVisible = true;
            this.dialogFormVisibleform = {};
          }

          // disabled: true,
        },
        {
          label: "Whole Open Gift Amount",
          type: "primary",
          size: "mini",
          plain: true,
          handle: async e => {
            let res = await this.apis.settingTopup_startOrStop({ switch: 1 }); //switch：1 开   2 关
            this.$message({
              message:
                res.code === 200
                  ? "Gift Amount Open Success"
                  : "Gift Amount Open Failure",
              type: res.code === 200 ? "success" : "error"
            });
            this.getData();
          }
        },
        {
          label: "Whole Close Gift Amount",
          type: "danger",
          size: "mini",
          plain: true,
          handle: async e => {
            let res = await this.apis.settingTopup_startOrStop({ switch: 2 }); //switch：1 开   2 关
            this.$message({
              message:
                res.code === 200
                  ? "Gift Amount Close Success"
                  : "Gift Amount Close Failure",
              type: res.code === 200 ? "success" : "error"
            });
            this.getData();
          }
        }
        // {
        //   type: "switch",
        //   inactive_text: "Gift Amount(全选)",
        //   values: [1, 2],
        //   data: 2,
        //   change: async (item) => {
        //     console.log(8888, item, item.data);
        //     this.$forceUpdate()
        //     if (item.data = 1) {

        //       this.$message({
        //         message: "修改Success！",
        //         type: "success",
        //       });
        //     }
        //     else {

        //       this.$message({
        //         message: "修改Success！",
        //         type: "success",
        //       });
        //     }
        //     const res = await this.apis.settingTopup_startOrStop({});
        //     this.getData();
        //   },
        // },
      ],
      tableData: [],
      tableCols: [
        // {
        //   label: "Packageid",
        //   prop: "id",
        // },
        {
          label: "Package Name",
          prop: "mealName"
        },
        {
          label: "Recharge Amount",
          prop: "inMoney",
          formatter: e => (e.inMoney ? "$" + e.inMoney : "--")
        },
        {
          label: "Gift Amount",
          prop: "outMoney",
          formatter: row => {
            if (row.outStatus == 2) {
              return "$0";
            } else {
              return "$" + row.outMoney;
            }
          }
        },
        {
          label: "Time",
          prop: "ctime",
          formatter: row => {
            return new Date(row.ctime).toLocaleString();
          }
        },
        {
          label: "Open Gift",
          prop: "outStatus",
          type: "tag",
          // width: 80,
          formatter: row => {
            if (row.outStatus == 2) {
              return "Close";
            } else {
              return "Open";
            }
          }
        },
        {
          label: "Operations",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "Edit",
              type: "primary",

              plain: true,
              handle: row => {
                // this.edit(row),
                this.dialogFormVisibleform = {};
                this.dialogFormVisibletitle = "Edit";
                this.dialogFormVisible = true;
                this.dialogFormVisibleform.id = row.id;
                this.dialogFormVisibleform.mealName = row.mealName;
                this.dialogFormVisibleform.inMoney = row.inMoney;
                this.dialogFormVisibleform.outMoney = row.outMoney;
                this.dialogFormVisibleform.outStatus = row.outStatus;

                console.log(3333, this.dialogFormVisibleform);
              }
            },
            {
              label: "Delete",
              type: "danger",

              plain: true,
              handle: row => {
                this.$confirm("Confirm Delete？", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.settingTopup_del({
                      id: row.id
                    });
                    this.$message({
                      message: "Delete Success！",
                      type: "success"
                    });
                    this.getData();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      tableHandles3: [
        {
          label: "Add",
          type: "primary",
          size: "mini",
          plain: true,
          handle: async e => {
            (this.searchData3 = {
              openStatus: 2,
              overMoney: "",
              instructions: "",
              protocols: "",
              agentId: ""
            }),
              this.elFormVisible();
          }
        }
      ],
      tableData3: [],
      tableCols3: [
        {
          label: "id",
          prop: "id"
        },
        {
          label: "Agent Name",
          prop: "name"
        },
        {
          label: "Agent ID",
          prop: "agentId"
        },
        {
          label: "Tips For Leasing Battery",
          prop: "instructions",
          overflow: true
        },
        {
          label: "Rental Battery Package Agreement",
          prop: "protocols",
          overflow: true
        },
        {
          label: "Overdue Money",
          prop: "overMoney",
          formatter: row => {
            return "$" + row.overMoney + "/day";
          }
        },
        {
          label: "Late Payment Function",
          prop: "openStatus",
          formatter: row => {
            if (row.openStatus == 1) {
              return "Open";
            } else {
              return "Close";
            }
          }
        },
        {
          label: "Creation Time",
          prop: "ctime"
        },
        {
          label: "Operations",
          type: "button",
          width: 150,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              plain: true,
              handle: row => {
                this.elFormVisible();
                console.log(111111111111, row);
                this.searchData3.overMoney = row.overMoney;
                this.searchData3.instructions = row.instructions;
                this.searchData3.protocols = row.protocols;
                this.searchData3.openStatus = row.openStatus;
                this.searchData3.agentId = row.agentId;
              }
            }
          ]
        }
      ],
      formData: {
        mealName: "",
        inMoney: "",
        outMoney: "",
        outStatus: ""
      },
      formCols: [
        {
          type: "input",
          label: "Package Name",
          width: 350,
          prop: "mealName"
        },
        {
          type: "input",
          label: "Recharge Amount($)",
          width: 350,
          prop: "inMoney"
          // remark: "元"
        },
        {
          type: "input",
          label: "Gift Amount($)",
          width: 350,
          prop: "outMoney"
          // remark: "元"
        },
        {
          type: "radio",
          label: "Open Gift",
          width: 450,
          prop: "outStatus",
          radios: [
            { label: "Open", value: 1 },
            { label: "Close", value: 2 }
          ]
        }
      ],
      formRules: {
        mealName: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        inMoney: [{ required: true, message: "Please Enter", trigger: "blur" }],
        outMoney: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        outStatus: [
          { required: true, message: "Please Select", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.noRechargeFn()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.YesRechargeFn()
        }
      ],

      //===============================================================

      searchData: {
        giveMoney: "",
        outStatus: 2,
        id: ""
      },
      searchForm: [
        {
          type: "input",
          label: "New User Impower Register Gift Balance",
          placeholder: "",
          prop: "giveMoney",
          width: 200
          // remark: "元"
        },
        {
          type: "switch",
          label: "Gift Function",
          prop: "outStatus",
          width: 200,
          values: [1, 2],
          change: async item => {
            if ((item = 1)) {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            } else {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            }
          }
        },
        { type: "slot", name: "slot1" }
      ],
      searchHandle: [
        { type: "primary", label: "Save", handle: e => this.elFormSubmit2() }
      ],
      searchRules: {
        giveMoney: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      },
      //====================================================================
      searchData2: {
        openStatus: 2,
        occupyTime: "",
        overMoney: "",
        maxMoney: "",
        instructions: "",
        explanation: ""
      },
      searchForm2: [
        {
          type: "switch",
          label: "Warehouse Charge Function",
          prop: "openStatus",
          width: 200,
          values: [1, 2],
          change: async item => {
            if ((item = 1)) {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            } else {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            }
          }
        },
        {
          type: "input",
          label: "已结束充电Battery免费占用仓位时长（分钟）",
          placeholder: "",
          prop: "occupyTime",
          width: 200,
          remark: "分钟"
        },
        {
          type: "input",
          label: "超出免费占用仓位时长后的每小时占仓费用Money(元)",
          placeholder: "",
          prop: "overMoney",
          width: 200,
          remark: "元"
        },
        {
          type: "input",
          label: "占仓费用上限Money（元）",
          placeholder: "",
          prop: "maxMoney",
          width: 200,
          remark: "元"
        },
        {
          type: "tinymce",
          label: "充电Employ须知",
          placeholder: "",
          prop: "instructions",
          width: 200
        },
        {
          type: "tinymce",
          label: "占仓扣费说明",
          placeholder: "",
          prop: "explanation",
          width: 200
        }
      ],
      searchHandle2: [
        { type: "primary", label: "Save", handle: e => this.elFormSubmit3() }
      ],
      searchRules2: {
        occupyTime: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        overMoney: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        maxMoney: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        instructions: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        explanation: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      },
      //  =====================================================================================
      searchData3: {
        openStatus: 2,
        overMoney: "",
        instructions: "",
        protocols: "",
        agentId: ""
      },

      searchForm3: [
        {
          type: "select",
          label: "Agent ID",
          prop: "agentId",
          width: 400,
          placeholder: "Please Select",
          options: []
        },
        {
          type: "switch",
          label: "Late Payment Function",
          prop: "openStatus",
          width: 400,
          values: [1, 2],
          change: async item => {
            if ((item = 1)) {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            } else {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            }
          }
        },
        {
          type: "input",
          label: "Overdue money",
          placeholder: "",
          prop: "overMoney",
          placeholder: "Please Enter",
          width: 400
          // remark: "天"
        },
        { type: "slot", name: "slot1" },
        {
          type: "textarea",
          label: "Tips For Leasing Battery",
          placeholder: "",
          placeholder: "Please Enter",
          prop: "instructions",
          width: 400
        },
        {
          type: "textarea",
          label: "Rental Battery Package Agreement",
          placeholder: "",
          placeholder: "Please Enter",
          prop: "protocols",
          width: 400
        }
      ],
      searchHandle3: [
        {
          label: "Cancel",
          handle: e => this.noChangeFn()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => {
            this.elFormSubmit4(e);
          }
        }
      ],
      searchRules3: {
        agentId: [
          { required: true, message: "Please Select", trigger: "blur" }
        ],
        overMoney: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        instructions: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        protocols: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      },
      //  ==============================================================================================
      searchData4: {
        openStatus: "",
        overMoney: "",
        instructions: "",
        protocols: ""
      },
      searchForm4: [
        {
          type: "switch",
          label: "Late Payment Function",
          prop: "openStatus",
          width: 200,
          values: [1, 2],
          change: async item => {
            console.log(item);
            if ((item = 1)) {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            } else {
              this.$message({
                message: "Modify Success！",
                type: "success"
              });
            }
          }
        },
        {
          type: "input",
          label: "Overdue money",
          placeholder: "",
          prop: "overMoney",
          width: 200
          // remark: "天"
        },
        // { type: "input",label:'占仓费用上限Money', placeholder: "", prop: "programName", width: 200,remark:'元/天' },
        { type: "slot", name: "slot1" },
        {
          type: "tinymce",
          label: "Tips For Leasing Car",
          placeholder: "",
          prop: "instructions",
          width: 200
        },
        {
          type: "tinymce",
          label: "Rental Car Package Agreement",
          placeholder: "",
          prop: "protocols",
          width: 200
        }
      ],
      searchHandle4: [
        { type: "primary", label: "Save", handle: e => this.elFormSubmit5() }
      ],
      searchRules4: {
        overMoney: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        instructions: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        protocols: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ]
      }
    };
  },
  async mounted() {
    this.getData();
    this.getData3();
    this.settingExchange_getInfo();
    this.$nextTick(() => (this.isShowTinymce = true));
    this.agentFn();
  },
  methods: {
    // selectionChange(val) {
    //   console.log(2323, val);
    // },
    noChangeFn() {
      this.elFormVisible();
    },
    YesRechargeFn() {
      this.elFormSubmit();
    },
    noRechargeFn() {
      this.elFormVisible();
    },
    changeSwitch(e) {
      // console.log(233466, e);
      this.$forceUpdate();
      this.dialogFormVisibleform.outStatus = e;
    },
    affirmAgentFn(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          console.log("11Whole有值", this.dialogFormVisibleform);
          // Add加的
          if (!this.dialogFormVisibleform.id) {
            const res = await this.apis.settingTopup_save({
              mealName: this.dialogFormVisibleform.mealName,
              inMoney: this.dialogFormVisibleform.inMoney,
              outMoney: this.dialogFormVisibleform.outMoney,
              outStatus: this.dialogFormVisibleform.outStatus
            });
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
          } else {
            //Edit的

            const res = await this.apis.settingTopup_updata({
              mealName: this.dialogFormVisibleform.mealName,
              inMoney: this.dialogFormVisibleform.inMoney,
              outMoney: this.dialogFormVisibleform.outMoney,
              outStatus: this.dialogFormVisibleform.outStatus,
              id: this.dialogFormVisibleform.id
            });
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
          }

          console.log("Whole Have Value", this.dialogFormVisibleform);
          this.dialogFormVisible = false;
          this.getData();
        } else {
          return false;
        }
      });
    },
    // 拿到Agentid列表
    async agentFn() {
      let param = {
        pageNum: 1,
        pageSize: 50
      };
      let res = await this.apis.agent_list(param);
      let arr = res.rows;
      let options = [];
      arr.forEach(i => {
        options.push({
          label: i.name,
          value: i.id
        });
      });
      this.searchForm3[
        this.labIndex2(this.searchForm3, "agentId")
      ].options = options;
    },
    handleClick(tab, event) {
      this.activeName = tab.label;
      this.isShowTinymce = false;
      this.$nextTick(() => (this.isShowTinymce = true));
    },
    async getData() {
      const res = await this.apis.settingTopup_list({});
      const list = res.rows;
      this.tableData = list;
      this.tablePage.total = res.total;
    },
    async getData3() {
      let res = await this.apis.settingExchangeList();
      this.tableData3 = res.data || [];
    },
    //RechargePackage
    elFormSubmit() {
      this.$refs.elForm3.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (!this.formData.id) {
            const res = await this.apis.settingTopup_save({
              mealName: this.formData.mealName,
              inMoney: this.formData.inMoney,
              outMoney: this.formData.outMoney,
              outStatus: this.formData.outStatus
            });
          } else {
            const res = await this.apis.settingTopup_updata({
              mealName: this.formData.mealName,
              inMoney: this.formData.inMoney,
              outMoney: this.formData.outMoney,
              outStatus: this.formData.outStatus,
              id: this.formData.id
            });
          }

          this.elFormVisible();
          this.getData();
        }
      });
    },
    edit(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });

      this.formData.id = row.id;
      console.log(222334455);
      this.elFormVisible();
    },
    //  ================================

    //Gift Amount
    elFormSubmit2() {
      this.$refs.search.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.settingGive_saveOrUpdate({
            giveMoney: this.searchData.giveMoney,
            outStatus: this.searchData.outStatus,
            id: this.searchData.id
          });

          this.$message({
            message: "Operations Success！",
            type: "success"
          });
        }
      });
    },
    //  =============充电业务基础Setup===============================

    elFormSubmit3() {
      this.$refs.search2.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.settingCharge_saveOrUpdate({
            occupyTime: this.searchData2.occupyTime,
            overMoney: this.searchData2.overMoney,
            maxMoney: this.searchData2.maxMoney,
            instructions: this.searchData2.instructions,
            explanation: this.searchData2.explanation,
            openStatus: this.searchData2.openStatus,
            id: this.searchData2.id
          });

          this.$message({
            message: "Operations Success！",
            type: "success"
          });
        }
      });
    },
    //  ==============逾期Setup================
    async settingExchange_getInfo() {
      const res = await this.apis.settingExchange_getInfo();
      const data = res.data;
      Object.keys(this.searchData3).forEach(key => {
        this.searchData3[key] = data[key];
      });
    },
    elFormSubmit4(row) {
      console.log(1111111, row);
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.settingExchange_saveOrUpdate({
            overMoney: this.searchData3.overMoney,
            instructions: this.searchData3.instructions,
            protocols: this.searchData3.protocols,
            openStatus: this.searchData3.openStatus,
            agentId: this.searchData3.agentId
          });
          this.$message({
            message: "Operations Success！",
            type: "success"
          });
          this.elFormVisible();
          this.getData3();
        }
      });
    },
    //=============================租车业务基础Setup========================================

    elFormSubmit5() {
      this.$refs.search4.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.apis.settingRent_saveOrUpdate({
            overMoney: this.searchData4.overMoney,
            instructions: this.searchData4.instructions,
            protocols: this.searchData4.protocols,
            openStatus: this.searchData4.openStatus
            // id:this.searchData4.id,
          });
          this.$message({
            message: "Operations Success！",
            type: "success"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss"></style>
